<div class="selectable-card is-rounded card-container summary {{if hasErrorClass "has-border-danger"}}" data-test-replication-summary-card>
  {{!-- Check if DR or Performance Card --}}
  {{#if (eq title "Disaster Recovery")}}
    <h3 class="title is-5 grid-item-top-left card-title">{{title}}</h3>
    <div class="grid-item-top-right">
      <ToolbarLink @params={{array 'mode.index' 'dr'}} data-test-manage-link={{title}}>
        Details
      </ToolbarLink>
    </div>
    <div class="grid-item-left">
      <h6 class="title is-6">last_dr_wal</h6>
      <p class="helper-text is-label has-text-grey">Index of last WAL entry written on local storage. Updates every ten seconds.</p>
    </div>
    <div class="grid-item-right">
      <h6 class="title is-6">known_secondaries</h6>
      <p class="helper-text is-label has-text-grey">Number of secondaries connected to this primary.</p>
    </div>
    <h2 class="title is-3 grid-item-bottom-left" data-test-lastWAL>{{format-number lastDrWAL}}</h2>
    <h2 class="title is-3 grid-item-bottom-right" data-test-known-secondaries>{{format-number knownSecondariesDr}}</h2>
    <div class="grid-item-bottom-row">
      <h6 class="title is-6">merkle_root</h6>
      <p class="helper-text is-label has-text-grey">A snapshot of the merkle tree's root hash.</p>
      <div><code class="is-word-break has-text-black">{{merkleRootDr}}</code></div>
    </div>
  {{else}}
    <h3 class="title is-5 grid-item-top-left card-title">{{title}}</h3>
    <div class="grid-item-top-right">
      <ToolbarLink @params={{array 'mode.index' 'performance'}} data-test-manage-link={{title}}>
        Details
      </ToolbarLink>
    </div>
    <div class="grid-item-left">
      <h6 class="title is-6">last_performance_wal</h6>
      <p class="helper-text is-label has-text-grey">Index of last WAL entry written on local storage. Updates every ten seconds.</p>
    </div>
    <div class="grid-item-right">
      <h6 class="title is-6">known_secondaries</h6>
      <p class="helper-text is-label has-text-grey">Number of secondaries connected to this primary.</p>
    </div>
    <h2 class="title is-3 grid-item-bottom-left" data-test-lastWAL>{{format-number lastPerformanceWAL}}</h2>
    <h2 class="title is-3 grid-item-bottom-right" data-test-known-secondaries>{{format-number knownSecondariesPerformance}}</h2>
    <div class="grid-item-bottom-row">
      <h6 class="title is-6">merkle_root</h6>
      <p class="helper-text is-label has-text-grey">A snapshot of the merkle tree's root hash.</p>
      <div><code class="is-word-break has-text-black">{{merkleRootPerformance}}</code></div>
    </div>
  {{/if}}
</div>
